<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/frameCss/bootstrap.min.css"/>
		<link rel="stylesheet" href="../css/public.css" />
		<link rel="stylesheet" href="../css/store.css" />
	</head>

	<body>
		<header></header>
		<div id="chooseDate-container">
			<div class="explain">
				<span style="width: 16px;height: 16px;background-color: rgb(245, 246, 249);border-radius: 50%;border: 1px #ccc solid;display: inline-block;margin:2.5% 1% 0 18%;" class="circle1"></span>
				<span style="margin: 0 3% 0 0;">可选</span>
				<span style="width: 16px;height: 16px;background-color: rgb(255, 165, 0);border-radius: 50%;display: inline-block;margin:2.5% 1% 0 3%;" class="circle2"></span>
				<span>已选</span>
				<span style="width: 16px;height: 16px;background-color: #FF0000;border-radius: 50%;display: inline-block;margin:2.5% 1% 0 3%;" class="circle3"></span>
				<span>不可选</span>
				<button class="delChoice btn btn-danger btn-xs" style="margin-left: 5%;">清空选择</button>
			</div>
			<div class="week">
				<ul>
					<li style="color: #FF0000;">日</li>
					<li>一</li>
					<li>二</li>
					<li>三</li>
					<li>四</li>
					<li>五</li>
					<li style="color: #FF0000;">六</li>
				</ul>
			</div>
			<div class="chooseDate-wrapper">
				<div class="chooseDate">
				</div>
			</div>
		</div>

		<div id="hasChoosen">
			<p class="warn">一次最多选择5个日期</p>
			<p class="count"></p>
			<div class="hasChoosexArea">

			</div>
			<div class="next">
				<button class="btn btn-danger btn-lg confirm" disabled="disabled">请选日期</button>
			</div>
		</div>
		<script src="../js/frameJS/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/frameJS/iscroll/build/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {

				//加载公共头部！！！
				$('header').load('../commonTemplate/common-header.html')

				//引用iScroll并调用
				function loaded() {
					var myScroll = new IScroll('.chooseDate-wrapper', {
						scrollbars: false,
						mouseWheel: true,
						interactiveScrollbars: true,
						shrinkScrollbars: 'scale',
						fadeScrollbars: true,
						//click:true防止点击事件或a标签失效
						click: true,
					});
				}
				window.setTimeout(loaded, 100);

				//添加日期
				function addDay() {

					$.get('../json/date.txt', function(res) {
						var JSONobj = JSON.parse(res)
						console.log(JSONobj)
						for(var i = 0; i < JSONobj.data.length; i++) {
							var dayArr = JSONobj.data[i].day.split(",")
							//console.log(dayArr);

							var $choosenDateBox = $('<div class="choosenDate-box"></div>');
							var $li = ''

							$.each(dayArr, function(index, val) {
								var li = '<li>' + val + '</li>'
								$li += li
							});

							var $p = '<p class="YearAndMonth">' + JSONobj.data[i].year + '</p>'
							var $ul = '<ul class="dayList">' + $li + '</ul>'

							$choosenDateBox.html($p + $ul)
							$('#chooseDate-container .chooseDate').append($choosenDateBox)
						}

					})
				}
				addDay();
				
				//把没内容的li标签变成span标签，便于后续操作
				function changeLabel(){
					$('li','.dayList').each(function(index){
						if($(this).text() == ''){
							$(this).replaceWith('<span>'+''+'</span>').addClass('noSee')
						}
					})
				}
				
				//模拟一些已选数据 
				function hasChosen(){
					$('li','.dayList').eq(10).addClass('hasChosen');
					$('li','.dayList').eq(11).addClass('hasChosen');
					$('li','.dayList').eq(31).addClass('hasChosen');
					$('li','.dayList').eq(55).addClass('hasChosen');
				}
				//定义已选择数组
				var spanArr = [];
				//定义不能重复的已选择的数组
				var spanArr2 = [];
				
				//选择日期
				function clickDate() {
					$('.dayList li').click(function() {
						//定义要传到数组的数据
						var chooseData = '<span>'+$(this).parent().prev().text() + $(this).text() + '日</span>';
						
						if($(this).hasClass('checked')) {
							//如果已经checked，点击时去掉checked和样式
							$(this).removeClass('checked')
							//遍历两个数组，删除不要的数据
							$.each(spanArr2,function(index,val){
								if(chooseData == val){
									spanArr2.splice(index,1)
								}
							})
							$.each(spanArr,function(index,val){
								if(chooseData == val){
									spanArr.splice(index,1)
								}
							})
							//重新渲染已选择
							$('.hasChoosexArea').html(spanArr2);
							//重新渲染场次和订金
							$('.count').html("<span>已选择" + spanArr2.length + "场，</span>"+"<span>订金："+"<span class='price'>¥" + spanArr2.length * 1000 +"</span></span>");
							//当数组数据为0时，恢复未选中页面
							if(spanArr2.length == 0){
								$('#hasChoosen .confirm').replaceWith('<button class="btn btn-danger btn-lg confirm" disabled="disabled">请选日期</button>');
								$('#hasChoosen .warn').css('display','block');
								$('.count').html('')
							}
						} else if($(this).hasClass('hasChosen')){
							alert('此日期不可选，请选择其他日期');
						}else {
							//如果没有checked，添加checked
							$(this).addClass('checked')
							//把数据存进数组
							spanArr.push(chooseData)
							//遍历数组，把没有重复的数据，存进新数组
							for(var i = 0; i < spanArr.length; i++) {
								if(spanArr2.indexOf(spanArr[i]) == -1) {
									spanArr2.push(spanArr[i])
								}
							}
							
							//日期不能选超过5场
							if(spanArr2.length>5){
								alert('选择日期不能超过5个');
								$(this).removeClass('checked').css('background-color','rgb(245,246,249)');
								//两个数组删除最后进去的元素
								spanArr2.pop();
								spanArr.pop();
								//重新渲染已选择等界面
								$('.hasChoosexArea').html(spanArr2);
								$('.count').html("<span>已选择" + spanArr2.length + "场，</span>"+"<span>订金："+"<span class='price'>¥" + spanArr2.length * 1000 +"</span></span>");
							}
							
							//重新渲染场次和订金
							$('.count').html("<span>已选择" + spanArr2.length + "场，</span>"+"<span>订金："+"<span class='price'>¥" + spanArr2.length * 1000 +"</span></span>");
							//重新渲染已选择
							$('.hasChoosexArea').html(spanArr2);					
							//数组有数据时，button变成可点击并隐藏提醒
							if(spanArr2.length !== 0){
								$('#hasChoosen .confirm').replaceWith('<button class="btn btn-danger btn-lg confirm jump">确认日期</button>');
								$('#hasChoosen .warn').css('display','none');
							}
							
						}
					})
				}

				//清空选择
				function delChoice() {
					$('.delChoice', '#chooseDate-container').click(function() {
						//清除已点击的checked属性
						$('li', '.dayList').removeClass('checked')
						//清空已选择区域
						$('#hasChoosen .hasChoosexArea').html('');
						//清空场次和金额
						$('.count').html('');
						//清空可重复数组
						spanArr.length = 0;
						//清空不可重复数组
						spanArr2.length = 0;
						//还原确认按钮
						$('#hasChoosen .confirm').replaceWith('<button class="btn btn-danger btn-lg confirm" disabled="disabled">请选日期</button>');
						//还原提醒
						$('#hasChoosen .warn').css('display','block')
					})
				}
				
				//点击确认日期跳转到订单页面
				function toOrderPage(){
					$('#hasChoosen .next').click(function(){
						window.location.href = 'order.html'
					})
				}
				
				//渲染数据原因，需要延迟100ms才能执行其他方法
				window.setTimeout(function() {
					changeLabel();
					hasChosen();
					clickDate();
					delChoice();
					toOrderPage();
				}, 100)

				

				//定义第一次点击变量
				//var firstClick = false;

				//给每月的第一天和最后一天加上特定class，便于选择相邻日期
				//				function addSpecialClass(){
				//					$('.dayList li:last-of-type').addClass('lastDay')
				//					$('.dayList li:first-of-type').addClass('firstDay')
				//				}

				//选择日期，并且必须选择相邻日期
				//				function clickDate(){
				//					var $firstDay = $('.firstDay');
				//					var $lastDay = $('.lastDay')
				//					
				//					$('.dayList .firstDay').click(function(){
				//						if($(this).parent().parent().prev().find($lastDay).hasClass('checked')){
				//							$(this).css('background-color','rgb(255, 165, 0)');
				//							$(this).addClass('checked');
				//						}
				//					})
				//					
				//					$('.dayList .lastDay').click(function(){
				//						if($(this).parent().parent().next().find($firstDay).hasClass('checked')){
				//							$(this).css('background-color','rgb(255, 165, 0)');
				//							$(this).addClass('checked');
				//						}
				//					})
				//					
				//					$('li','.dayList').click(function(){
				//						if(firstClick){
				//							if($(this).prev().hasClass('checked')){
				//								$(this).css('background-color','rgb(255, 165, 0)')
				//								$(this).addClass('checked');
				//							}else if($(this).next().hasClass('checked')){
				//								$(this).css('background-color','rgb(255, 165, 0)')
				//								$(this).addClass('checked');		
				//							}else{
				//								alert("请选择相邻日期");
				//								chooseWrong()
				//							}
				//						}else{
				//							firstClick = true;
				//							$(this).css('background-color','rgb(255, 165, 0)');
				//							$(this).addClass('checked');
				//						}
				//					})
				//				}

				//当点击出现错误时
				//							function chooseWrong() {
				//								spanArr.pop()
				//								spanArr2.pop();
				//								$('.count').text("已选择" + spanArr2.length + "场,订金：¥" + spanArr2.length * 1000);
				//								$('.hasChoosexArea').text(spanArr2.join(''));
				//							}
			})
		</script>
	</body>

</html>